<!-- Copyright (c) 2022 渝州大数据实验室
 *
 * Lanius is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *     http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
-->
<!-- 
* @desc:用户管理
* @fileName:user.vue
* @author:chenxiaofeng@yzbdl.ac.cn
* @date:2022-4-7
!-->
<script setup lang="ts">
import { onMounted, reactive } from "vue";
import { ElMessage } from "element-plus";
// 引入用户管理查询
import UserSearch from "./components/user-search.vue";
// 引入用户管理详情
import UserDetails from "./components/user-details.vue";
// 引入用户管理分页
import UserPagination from "@/components/common/pagination.vue";
import OperationDialog from "./components/operation.vue";
import { getCurrentInstance } from "vue";
import { showErrorMessage, showSuccessMessage } from "@/common/message";
const { proxy } = getCurrentInstance() as any;

// 定义列表数据、分页变量
const listData = reactive({
  tableData: [],
  total: 0,
  isListLoading: false,
  isSearchLoading: false,
  opDialog: false,
  oneUserInfo: {},
  addOrEdit: "",
  tableOrgData: [],
});

// 定义请求数据
let reqData = {
  nickName: "",
  userName: "",
  page: 1,
  pageSize: 10,
};

/**
 * @description: 获取列表请求方法
 * @return void
 */
const reqTableList = () => {
  listData.isListLoading = true;
  const res = proxy.$HTTP.post({
    url: `/manager/account/query`,
    params: {
      page: reqData.page,
      size: reqData.pageSize,
    },
    data: {
      nickName: reqData.nickName,
      userName: reqData.userName,
    },
  });
  res.then((res: any) => {
    console.log("zzzz", res.isOk);
    if (res.isOk) {
      listData.tableData = res.data.records;
      listData.total = Number(res.data.total);
    }
    listData.isListLoading = false;
    listData.isSearchLoading = false;
  });
};

/**
 * @description : 查询方法
 * @param {serachParam} serachParam
 * @return void
 */
const searchFunc = (serachParam: any) => {
  listData.isSearchLoading = true;
  // 查询方法实现
  reqData.nickName = serachParam.nickName;
  reqData.userName = serachParam.userValue;
  reqTableList();
};

/**
 * @description: 获取当前分页页码
 * @param {number} pageNumber
 * @return void
 */
const getCurrentPageNumber = (pageNumber: number) => {
  reqData.page = pageNumber;
  reqTableList();
};

/**
 * 改变每页显示数量
 * @param size 页码
 */
const changePageSize = (size: number) => {
  reqData.pageSize = size;
  reqTableList();
};

/**
 * @description: 新增弹窗控制
 * @param {string} addOrEdit
 * @return void
 */
const dialogControlFunc = (addOrEdit: string) => {
  listData.oneUserInfo = {};
  listData.addOrEdit = addOrEdit;
  listData.opDialog = true;
};

/**
 * @description:新增用户方法
 * @param {any} info
 * @return void
 */
const saveUser = (info: any) => {
  //保存方法实现
  const res = proxy.$HTTP.post({
    url: `/manager/account`,
    data: info,
  });
  res
    .then((res: any) => {
      if (res.code === 200) {
        showSuccessMessage({
          message: "保存成功！",
        });
        listData.opDialog = false;
        reqTableList();
      }
    })
    .catch((response: any) => {
      showErrorMessage({
        message: response.msg,
      });
    });
};

/**
 * @description:修改用户方法
 * @param {any} info
 * @return void
 */
const editUser = (info: any) => {
  let reqObj = { ...info };
  delete reqObj.id;
  const res = proxy.$HTTP.put({
    url: `/manager/account/${info.id}`,
    data: reqObj,
  });
  res
    .then((res: any) => {
      if (res.code === 200) {
        showSuccessMessage({
          message: "保存成功！",
        });
        listData.opDialog = false;
        reqTableList();
      }
    })
    .catch((response: any) => {
      showErrorMessage({
        message: response.msg,
      });
    });
};

/**
 * 编辑弹窗控制
 * @param addOrEdit 新增或编辑文字
 * @param oneInfo 当前条信息
 */
const dialogEditFunc = (addOrEdit: string, oneInfo: any) => {
  listData.addOrEdit = addOrEdit;
  listData.oneUserInfo = { ...oneInfo };
  listData.opDialog = true;
};

/**
 * 改变单个用户状态
 * @param v 改变的状态值
 * @param r 当前行数据
 */
const changeStatus = (v: any, r: any) => {
  const res = proxy.$HTTP.post({
    url: `/manager/account/` + r.id + "/status",
    data: {
      status: v,
    },
  });
  res
    .then((res: any) => {
      if (res.code === 200) {
        let msg: string = "";
        if (v === 1) {
          msg = "启用成功";
        } else {
          msg = "禁用成功";
        }
        showSuccessMessage({
          message: msg,
        });
        listData.opDialog = false;
        reqTableList();
      }
    })
    .catch((response: any) => {
      listData.opDialog = false;
      showErrorMessage({
        message: response.data,
      });
    });
};

/**
 * @description: 删除用户方法
 * @param {string} id
 * @return void
 */
const delUser = (id: string) => {
  const res = proxy.$HTTP.delete({
    url: `/manager/account/` + id,
  });
  res
    .then((res: any) => {
      if (res.code === 200) {
        showSuccessMessage({
          message: "删除成功！",
        });
        listData.opDialog = false;
        reqTableList();
      }
    })
    .catch((response: any) => {
      ElMessage.error(response.data);
    });
};

/**
 * @description: 获取组织列表
 * @return void
 */
const reqOrgList = () => {
  const res = proxy.$HTTP.post({
    url: `/manager/org/query`,
    params: {
      page: reqData.page,
      size: 50,
    },
    data: {
      orgName: "",
    },
  });
  res.then((res: any) => {
    if (res.isOk) {
      listData.tableOrgData = res.data.records;
    }
  });
  res.catch((error: any) => {
    if (error.data instanceof Array) {
      showErrorMessage({
        message: error.data[0].errorMsg,
      });
    } else {
      showErrorMessage({
        message: error.data,
      });
    }
  });
};

onMounted(() => {
  // 初始化列表数据
  reqTableList();
  reqOrgList();
});
</script>

<template>
  <div class="page-list">
    <!-- 表单 -->
    <div class="page-table">
      <!-- 查询 -->
      <user-search
        :searchFunc="searchFunc"
        :isSearchLoading="listData.isSearchLoading"
        :dialogControlFunc="dialogControlFunc"
      ></user-search>
      <!-- 列表详情 -->
      <user-details
        :delUser="delUser"
        :dialogEditFunc="dialogEditFunc"
        :tableData="listData.tableData"
        :changeStatus="changeStatus"
        :isListLoading="listData.isListLoading"
      ></user-details>
      <!-- 分页 -->
      <user-pagination
        :total="listData.total"
        :pageSize="reqData.pageSize"
        :getCurrentPageNumber="getCurrentPageNumber"
        :changePageSize="changePageSize"
      ></user-pagination>
    </div>
  </div>
  <!-- 新增弹窗 -->
  <el-dialog
    v-model="listData.opDialog"
    v-if="listData.opDialog"
    :title="listData.addOrEdit"
    :width="740"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <operation-dialog
      :saveUser="saveUser"
      :editUser="editUser"
      :tableOrgData="listData.tableOrgData"
      :oneUserInfo="listData.oneUserInfo"
      :addOrEdit="listData.addOrEdit"
    />
  </el-dialog>
</template>

<style lang="scss" scoped>
.page-list {
  background-color: #fff;
  position: relative;
  padding: 15px;
  height: calc(100vh - 130px);
}
</style>
